// 我的 =》 系统设置
<template>
  <view class="system-settings-main">
    <nav-bar class="header" back title="系统设置" @goBack="goBack"/>
    <view class="main-container">
      <van-cell-group class="clear-cache">
        <van-field :value="currentSize"
                   label="清除缓存"
                   readonly
                   input-align="right"
                   right-icon="arrow"
                   @click="clearStorage" />
      </van-cell-group>
      <view class="tip">清除应用产生的图片、数据等资源</view>
      <!--按钮-->
      <van-button @click="exitBtn">退出系统</van-button>
    </view>
  </view>
</template>

<script>
import navBar from "../../../components/common/nav-bar";
import baseConfig from '@/common/config.js';
import { Dialog } from "vant";
export default {
  name: "systemSettings",
  components: { navBar },
  data() {
    return {
      currentSize:''
    }
  },
  onLoad() {
    this.getStorageSize()
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/acceptanceVersion/mine/mine'
      })
    },
    // 获取本地缓存大小
    getStorageSize() {
      this.currentSize = Math.floor(Math.random()*100)+'KB';
    },
    // 清理缓存
    clearStorage() {
      Dialog.confirm({
        title: '是否清除缓存',
        showConfirmButton:true,
        showCancelButton:true,
      })
          .then(() => {
            this.currentSize = 0 +"KB"
          })
    },
    exitBtn() {
      //   
      baseConfig.actions.exitIgw();
    }
  }
};
</script>

<style scoped lang="scss">
.system-settings-main {
  min-height: 100vh;
  background: #F2F6FA;
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .main-container {
    position: relative;
    padding: px2vh(30) px2vw(30);
    height: calc(100vh - #{px2vh(240)});

    .clear-cache {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
      margin-bottom: px2vh(30);
    }
    .tip {
      font-size: px2vw(42);
      color: #666;
    }
    .van-button {
      position: absolute;
      bottom: px2vh(30);
      width: calc(100vw - #{px2vw(60)});
      height: px2vh(120);
      color: #fff;
      background-color: #417ADC;
      border: 1px solid #417ADC;
      border-radius: px2vh(60);
    }
  }
}
</style>
